<template>
    <div>
        <header class="header">
            <h1>备忘录</h1>
            <input class="new-todo"
            autofocus autocomplete="off"
            placeholder="需要做些什么？"
            v-model="ipt"
            @keyup.enter="addList"
            @blur="addList">
        </header>
    </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      ipt: ""
    };
  },
  methods: {
    ...mapActions("todolist", ["addTodoList"]),
    addList() {
      if (this.ipt.trim()) {
        this.addTodoList({
            text: this.ipt.trim(),
            isCheck: false
        })
        this.ipt = ''
      }
    }
  },
  computed: {
    ...mapState("todolist", ["todoList"])
  }
};
</script>

<style scoped src="../assets/style/todolist.css">
</style>


<style scoped>
.header > h1 {
  top: -220px;
}
</style>